<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 800px;
            height: 40px;
            border: 1px solid #333;
            margin: 30px auto;
        }

        table {
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        tbody>tr:nth-child(odd) {
            background-color: pink;
        }

        tbody>tr:nth-child(even) {
            background-color: skyblue;
        }

        tbody>tr:hover {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <div id="tableRoot"></div>

    <script src="../../../tools/mathtool.js"></script>
    <script src="../../../tools/data_structure.js"></script>

    <script>
        class MyTable {
            constructor(root, arr, options = {}) {
                this.root = root
                this.arr = arr
                this.options = options

                // 渲染DOM结构
                this.renderDOM()

                // 渲染样式
                this.renderStyle()

                // 渲染数据
                this.renderData()
            }

            /* 渲染样式 */
            renderStyle() {
                const cssStr = `
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 800px;
            height: 40px;
            border: 1px solid #333;
            margin: 30px auto;
        }

        table {
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        tbody>tr:nth-child(odd) {
            background-color: pink;
        }

        tbody>tr:nth-child(even) {
            background-color: skyblue;
        }

        tbody>tr:hover {
            background-color: #ccc;
        }
        `
                const styles = parseCss(cssStr)
                /* 
                    [
                        {
                            selector:".container",
                            css:{
                                width: "800px";
                                height: "40px";
                                border: "1px solid #333";
                                marginLeft: "30px auto";
                            }
                        }
                    ]
                */
                styles.forEach(
                    ({ seletor, css }) => {
                        // 根据selector找出所有匹配的元素
                        const elements = this.root.querySelectorAll(seletor)

                        /* 为所有的元素设置对应的css样式 */
                        for (let i = 0; i < elements.length; i++) {
                            const el = elements[i]

                            /* 将css中的所有样式都设置给el */
                            for(let attr in css){
                                el.style[attr] = css[attr]
                            }
                        }
                    }
                )
            }

            /* 渲染表格的DOM结构 */
            renderDOM() {

                let ths = ""

                // 如果配置中的thead项不存在（假-undefined）
                if (!this.options.thead) {
                    /* 根据数据项的属性动态渲染th */
                    // 拿出第一条数据
                    const item = this.arr[0]

                    // 遍历其属性
                    for (let attr in item) {
                        // 每个属性名造一个th并填充属性名
                        ths += `<th>${attr}</th>`
                    }
                    console.log(ths);
                } else {
                    this.options.thead.forEach(
                        name => ths += `<th>${name}</th>`
                    )
                }


                this.root.innerHTML = `
                <table border="1" cellspacing="0">
                    <thead>
                    <tr>${ths}</tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <td>1</td><td>tom</td><td>20</td><td>male</td><td>删除</td>
                        </tr> -->
                    </tbody>
                </table>
                `

                this.tbody = this.root.querySelector("tbody")
            }

            /* 渲染数据 */
            renderData() {
                /* 遍历学生数组 */
                this.arr.forEach(

                    /* 为每个学生造一个tr 丢入tbody */
                    (item, index) => {

                        /* 为每个学生造一个tr 丢入tbody */
                        const tr = document.createElement("tr")
                        this.tbody.appendChild(tr)

                        /* 每个学生有几个属性 就造几个td 丢入tr */
                        for (let attr in item) {
                            const td = document.createElement("td")
                            tr.appendChild(td)

                            // td中的文字为当前属性值
                            td.innerText = item[attr]
                        }
                    }
                )
            }
        }
    </script>
    
    <script>
        /* 造1234条学生数据 */
        const students = createStudents(1234)
        console.log(students);

        const mt = new MyTable(
            tableRoot,
            students,
            {
                thead: ["ID", "姓名", "年龄", "性别", "班级", "薪水"],

                // 使用使用默认布局（布局+样式）
                useDefaultLayout: true,
            }
        )
    </script>
</body>

</html>